$(function(){
  const fontColor = '#4C9BFD'
  const gradienColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#00FAF9' },
    { offset: 1, color: '#0061CA' },
  ])
  pointChart()
  userChart()
  sellChart()
  progressChart()
  migrateChart()
  // 图表1 点位分布图-饼图
  function pointChart(){
    const myChart = echarts.init(document.querySelector(".point_chart"));
    const option = {
      /* legend: {
          top: 'bottom'
      }, */
      series: [
          {
              type: 'pie',
              radius: [10, 80],
              center: ['50%', '50%'],
              roseType: 'area',
              color:['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
              data: [
                { value: 20, name: '广东' },
                { value: 26, name: '北京' },
                { value: 24, name: '山东' },
                { value: 25, name: '河北' },
                { value: 20, name: '江苏' },
                { value: 25, name: '浙江' },
                { value: 30, name: '四川' },
                { value: 42, name: '湖北' }
              ]
          }
      ]
  };
  myChart.setOption(option);
  }
  // 图表3 点位分布图-柱状图
  function userChart(){
    const myChart = echarts.init(document.querySelector(".user_chart"));

    // 指定图表的配置项和数据
    const option = {
      // 鼠标移入柱子 显示提示框
      //tooltip: {},
      // 类型 下面的data要跟下面name一致
     
      // x轴上的内容
      xAxis: [{
        type: "category",
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        // 轴文本颜色
        axisLabel: {
          color: "#3772be"
        },
        // 轴线颜色
        /* axisLine: {
          lineStyle: {
            color: "#002739"
          }
        } */
      }],
      // y轴上的内容
      yAxis: [{
        type: "value",
        axisLabel: {
      color: "#3772be"
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(0, 240, 255, 0.3)'
      }
    },
      }],
      grid: {
        left: 0,
        top: 15,
        right: 30,
        bottom: 0,
        containLabel: true,
      },
      // 系列属性
      series: [
        {
          // 柱状图
          type: "bar",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: '#00f7f9'},
                  {offset: 1, color: '#0065cf'}
              ]
          )
          },
          // 柱子高度
          data: [2100, 1900, 1700, 1560, 1400, 
            { value: 1250, itemStyle: { color: "#254065" } },
            { value: 1250, itemStyle: { color: "#254065" } },
            { value: 1250, itemStyle: { color: "#254065" } }, 
          900, 750, 600, 480, 240],
          barWidth: '60%',
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  // 图表4 销售额统计-曲线图
  function sellChart(){
    let index=0
    const dataAll = [
      {
        expect: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        actual: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
      {
        expect: [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        actual: [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
      },
      {
        expect: [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        actual: [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
      },
      {
        expect: [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        actual: [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
      },
    ]
    const myChart = echarts.init(document.querySelector('.sell_chart'))
  function initChatr(){
    const option = {
      // 标题
      title: {
        // 副标题文本
        subtext: '单位:万元',
        top: -10,
        left: 30,
        subtextStyle: {
          color: fontColor,
        },
      },
      // 图例说明
      legend: {
        data: ['预期销售额', '实际销售额'],
        right: 0,
        textStyle: {
          color: fontColor,
        },
      },
      // 🧨 记得设置网格大小
      grid: { left: 0, right: 15, top: 30, bottom: 0, containLabel: true },
      // x 轴
      xAxis: {
        // X轴刻度标签(文字颜色)
        axisLabel: { color: fontColor },
        // X轴轴线
        axisLine: { show: true, lineStyle: { color: '#006F81' } },
        // 折线左右是否留白
        boundaryGap: false,
        // x轴的名称
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
      // y 轴 - 必填属性，必须保留，柱状图中如果删除掉会报错
      yAxis: {
        // Y轴刻度标签(文字颜色)
        axisLabel: { color: fontColor },
        // Y轴轴线
        axisLine: { show: true, lineStyle: { color: '#006F81' } },
        // 横过来的分隔线
        splitLine: { show: true, lineStyle: { color: '#006F81' } },
      },
      // 系列图表
      series: [
        {
          name: '预期销售额',
          type: 'line',
          data: dataAll[index].expect,
          itemStyle: { color: '#00DCDF' },
          smooth: true,
        },
        {
          name: '实际销售额',
          type: 'line',
          data: dataAll[index].actual,
          smooth: true,
          itemStyle: { color: '#f00' },
        },
      ],
    }
    myChart.setOption(option);
  }
  initChatr()
  setInterval(() => {
    // 定时让索引累加
    index++
    // 注意边界判断，如果超过 3，就从 0 开始
    if (index > 3) {
      index = 0
    }
    console.log(index)
    // 通过 JQ 选择器动起来
    $('.sell_date li').eq(index).addClass('active').siblings().removeClass('active')
    // 定时器调用，根据新的配置，切换图表内容
    initChatr()
  }, 2000)
}
 
  // 图表5 一季度销售额度-饼图
  function progressChart(){
    const myChart = echarts.init(document.querySelector('.progress_chart'))
    const option = {
      color: [
        '#12274D',
        'transparent',
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00FAF9' },
          { offset: 1, color: '#0061CA' },
        ]),
      ],
      series: [
        {
          // 类型：饼图
          type: 'pie',
          // 半径，设置两个半径，第一个为空心半径
          radius: [54, 62],
          // 饼图数据
          data: [
            { value: 1, name: '' },
            { value: 2, name: '' },
            { value: 1, name: '' },

          ],
          center: ['50%', '80%'],
          labelLine: {
            show: false,
          },
        },
      ],
    }
    myChart.setOption(option)
  }
  // 迁徙图
  function migrateChart(){
    var chinaGeoCoordMap = {
      "福建": [119.4543, 25.9222],
      "泉州": [118.4543, 25.0222],
      '大庆': [126.9688, 45.868],
      '内蒙古': [110.3467, 41.4899],
      "吉林": [125.8154, 44.2584],
      '北京': [116.4551, 40.2539],
      "辽宁": [123.1238, 42.1216],
      "河北": [114.4995, 38.1006],
      "天津": [117.4219, 39.4189],
      "山西": [112.3352, 37.9413],
      "陕西": [109.1162, 34.2004],
      "甘肃": [103.5901, 36.3043],
      "宁夏": [106.3586, 38.1775],
      "青海": [101.4038, 36.8207],
      "新疆": [87.9236, 43.5883],
      "西藏": [91.11, 29.97],
      "四川": [103.9526, 30.7617],
      "重庆": [108.384366, 30.439702],
      "山东": [117.1582, 36.8701],
      "河南": [113.4668, 34.6234],
      "江苏": [118.8062, 31.9208],
      "安徽": [117.29, 32.0581],
      "湖北": [114.3896, 30.6628],
      "浙江": [119.5313, 29.8773],
      '黑龙江': [127.9688, 45.368],
      "江西": [116.0046, 28.6633],
      "湖南": [113.0823, 28.2568],
      "贵州": [106.6992, 26.7682],
      "云南": [102.9199, 25.4663],
      "广东": [113.12244, 23.009505],
      "广西": [108.479, 23.1152],
      "海南": [110.3893, 19.8516],
      '上海': [121.4648, 31.2891]
  };
  var chinaDatas = [
      [{
          name: '黑龙江',
          value: 0.88
      }],
      [{
          name: '内蒙古',
          value: 0.12
      }],
      [{
          name: '吉林',
          value: 0.89
      }],
      [{
          name: '辽宁',
          value: 0.86
      }],
      [{
          name: '河北',
          value: 0.88
      }],
      [{
          name: '北京',
          value: 0.83
      }],
      [{
          name: '天津',
          value: 0.71
      }],
      [{
          name: '山西',
          value: 0.63
      }],
      [{
          name: '陕西',
          value: 0.56
      }],
      [{
          name: '宁夏',
          value: 0.17
      }],
      [{
          name: '云南',
          value: 0.11
      }],
      [{
          name: '四川',
          value: 1
      }],
      [{
          name: '重庆',
          value: 0.80
      }],
      [{
          name: '山东',
          value: 0.77
      }],
      [{
          name: '河南',
          value: 0.75
      }],
      [{
          name: '江苏',
          value: 0.88
      }],
      [{
          name: '安徽',
          value: 0.73
      }],
      [{
          name: '湖北',
          value: 0.75
      }],
      [{
          name: '浙江',
          value: 0.82
      }],
      [{
          name: '福建',
          value: 0.67
      }],
      [{
          name: '江西',
          value: 0.71
      }],
      [{
          name: '湖南',
          value: 0.75
      }],
      [{
          name: '广东',
          value: 0.78
      }],
      [{
          name: '海南',
          value: 0.1
      }],
      [{
          name: '新疆',
          value: 0
      }],
      [{
          name: '上海',
          value: 0.91
      }]
  ];
  
  var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [119.4543, 25.9222];//目的点
          if (fromCoord && toCoord) {
              res.push([{
                  coord: fromCoord,
                  value: dataItem[0].value
              }, {
                  coord: toCoord,
              }]);
          }
      }
      return res;
  };
  var series = [];
  [
      ['泉州', chinaDatas]
  ].forEach(function(item, i) {
      console.log(item)
      series.push({
              type: 'lines',
              zlevel: 2,
              effect: {
                  show: true,
                  period: 4, //箭头指向速度，值越小速度越快
                  trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: 'arrow', //箭头图标
                  symbolSize: 5, //图标大小
              },
              lineStyle: {
                  normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: .3 //尾迹线条曲直度
                  }
              },
              data: convertData(item[1])
          }, {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: { //涟漪特效
                  period: 4, //动画时间，值越小速度越快
                  brushType: 'stroke', //波纹绘制方式 stroke, fill
                  scale: 4 //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                  normal: {
                      show: true,
                      position: 'right', //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) { //圆环显示文字
                          return params.data.name;
                      },
                      fontSize: 13
                  },
                  emphasis: {
                      show: true
                  }
              },
              symbol: 'circle',
              symbolSize: function(val) {
                  return 5 + val[2] * 5; //圆环大小
              },
              itemStyle: {
                  normal: {
                      show: false,
                      color: '#f00'
                  }
              },
              data: item[1].map(function(dataItem) {
                  return {
                      name: dataItem[0].name,
                      value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                  };
              }),
          },
          //被攻击点
          {
              type: 'scatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                  period: 4,
                  brushType: 'stroke',
                  scale: 4
              },
              label: {
                  normal: {
                      show: true,
                      position: 'right',
                      //offset:[5, 0],
                      color: '#0f0',
                      formatter: '{b}',
                      textStyle: {
                          color: "#0f0"
                      }
                  },
                  emphasis: {
                      show: true,
                      color: "#f60"
                  }
              },
              symbol: 'pin',
              symbolSize: 50,
              data: [{
                  name: item[0],
                  value: chinaGeoCoordMap[item[0]].concat([10]),
              }],
          }
      );
  });
  const myChart =echarts.init(document.querySelector('.migrate_map'))
   const option = {
      tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(166, 200, 76, 0.82)',
          borderColor: '#FFFFCC',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: function(params, ticket, callback) {
              //根据业务自己拓展要显示的内容
              var res = "";
              var name = params.name;
              var value = params.value[params.seriesIndex + 1];
              res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
              return res;
          }
      },
      backgroundColor: "#013954",
      visualMap: { //图例值控制
          min: 0,
          max: 1,
          calculable: true,
          show: true,
          color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
          textStyle: {
              color: '#fff'
          }
      },
      geo: {
          map: 'china',
          zoom: 1.2,
          label: {
              emphasis: {
                  show: false
              }
          },
          roam: true, //是否允许缩放
          itemStyle: {
              normal: {
                  color: 'rgba(51, 69, 89, .5)', //地图背景色
                  borderColor: '#516a89', //省市边界线00fcff 516a89
                  borderWidth: 1
              },
              emphasis: {
                  color: 'rgba(37, 43, 61, .5)' //悬浮背景
              }
          }
      },
      series: series
  };
  myChart.setOption(option)
  }
  
})